<!doctype html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet"
        href="../lib/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css">
    <link rel="stylesheet" href="../lib/@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css" />
    <link rel="stylesheet" href="../lib/bootstrap-select/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>

<body class="bg-body-tertiary py-3">

    <div class="container-fluid">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-body py-3">
                <form class="row row-cols-sm-auto g-3 align-items-center">
                    <div class="col-12">
                        <div class="row">
                            <label for="username" class="col-sm-auto col-form-label">用户名</label>
                            <div class="col">
                                <input type="email" class="form-control" id="username" name="username">
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row">
                            <label for="status" class="col-sm-auto col-form-label">用户状态</label>
                            <div class="col">
                                <select class="selectpicker">
                                    <option value="0">所有</option>
                                    <option value="1">正常</option>
                                    <option value="2">停用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 gap-2">
                        <button type="button" class="btn btn-light bsa-querySearch-btn">
                            <i class="bi bi-search"></i>搜索
                        </button>
                        <button type="button" class="btn btn-light bsa-reset-btn">
                            <i class="bi bi-arrow-clockwise"></i>重置
                        </button>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <div id="toolbar" class="d-flex flex-wrap gap-2 mb-2">
                    <button class="btn btn-light batch-btn" disabled><i class="bi bi-trash"></i> 批量删除</button>
                    <!-- 分页选择器 -->
                    <div class="col">
                    </div>
                </div>
                <table id="table" data-toolbar="#toolbar"></table>
            </div>
        </div>
    </div>

    <!--回到顶部开始-->
    <a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
    <!--回到顶部结束-->

    <script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/@popperjs/core/dist/umd/popper.min.js"></script>
    <script src="../lib/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
    <script src="../lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="../lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../lib/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
    <script src="../lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <script src="../lib/bootstrap-select/dist/js/i18n/defaults-zh_CN.min.js"></script>
    <script src="../dist/js/bootstrap-admin.min.js"></script>
    <script src="../dist/js/app.js"></script>
    <!--假数据模拟,生产环境中请直接删除该js-->
    <script src="../dist/js/bootstrap-admin.mock.js"></script>

    <script>
        $(document).ready(function () {
            // 获取所有数据
            $.ajax({
                url: 'http://127.0.0.1:8000/stu/',
                method: 'GET',
                success: function (response) {
                    // 初始化表格
                    var data = response.students_info;
                    $('#table').bootstrapTable({
                        data: data,
                        pagination: true,
                        pageSize: 5, // 默认每页显示5条数据
                        pageList: [5, 10, 25, 50], // 可以选择的每页显示条数
                        uniqueId: 'idnumber',  // 唯一ID字段
                        columns: [
                            {
                                checkbox: true
                            },
                            {
                                title: '考生考号',
                                field: 'examnumber',
                                align: 'center',
                                sortable: true,
                                width: 12,
                                widthUnit: 'rem'
                            },
                            {
                                title: '姓名',
                                field: 'name',
                                align: 'center'
                            },
                            {
                                title: '身份证号',
                                field: 'idnumber',
                                align: 'center'
                            },
                            {
                                title: '来源',
                                field: 'origin',
                                align: 'center'
                            },
                            {
                                title: '本科专业',
                                field: 'undergradmajor',
                                align: 'center'
                            },
                            {
                                title: '本科院校',
                                field: 'undergradschool',
                                align: 'center'
                            },
                            {
                                title: '电子邮箱',
                                field: 'email',
                                align: 'center'
                            },
                            {
                                title: '电话',
                                field: 'phone',
                                align: 'center'
                            }
                        ]
                    });

                    // 监听每页显示条数的变化
                    $('#pageSize').change(function () {
                        var pageSize = $(this).val();
                        $('#table').bootstrapTable('refreshOptions', { pageSize: parseInt(pageSize) });
                    });
                },
                error: function (error) {
                    console.error('Error fetching data:', error);
                }
            });

            // 下拉框美化插件
            $('select').selectpicker();
        });
    </script>

</body>

</html>